<%@ page import="javax.naming.InitialContext" %>
<%@ page import="javax.sql.DataSource" %>
<%@ page import="java.sql.Connection" %>
<%@ page import="com.kgc.entity.News" %>
<%@ page import="java.util.List" %>
<%@ page import="java.util.ArrayList" %>
<%@ page import="java.util.HashMap" %>
<%@ page import="java.util.Map" %>
<%@ page import="com.kgc.dao.UserDao" %>
<%@ page import="com.kgc.dao.impl.UserDaoImpl" %>
<%@ page import="com.kgc.service.UserService" %>
<%@ page import="com.kgc.service.impl.UserServiceImpl" %>
<%@ page import="com.kgc.entity.User" %>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>

<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<!DOCTYPE html>
<html>
<head>
    <title>我的首页</title>
    <script src="static/js/jquery-1.9.1.min.js"></script>
    <style>
        ul{
            padding-left: 0px;
            background-color: lightpink;
        }
        ul li{
            line-height: 35px;
        }
        #testDiv{
            width: 600px;
            margin: 20px auto;
        }
    </style>
</head>
<body>
<%--<jsp:forward page="jsp/admin/admin.jsp"></jsp:forward>--%>
<%
    String user = request.getParameter("user");
    if(user!=null && !user.equals("")){
        session.removeAttribute(user);
    }
    Object total = application.getAttribute("total");
    out.println("当前在线人数："+(total==null?0:total));
%>
<ul>
    <li><a href="jsp/admin/admin.jsp">新闻管理后台</a></li>
    <li><a href="user1.jsp">用户1-张三登录</a></li>
    <li><a href="user2.jsp">用户2-李四登录</a></li>
</ul>
<button onclick="testAjax()">测试原生ajax</button>
<div id="content"></div>
<%
    //获取请求中传来的参数
    String userName = request.getParameter("userName");
    //从session中移除要解绑的用户
    if (userName!=null){
        session.removeAttribute(userName);
    }
%>

<div id="testDiv">
    <table border="1" cellspacing="0">
        <tr>
            <td>当前在线人数：</td>
            <td>
                ${totalOnline==null?0:totalOnline}
            </td>
        </tr>
        <tr>
            <td>在线人数详情：</td>
            <td></td>
        </tr>
        <tr>
            <td colspan="2"><a href="info.jsp?onlineUser=曹操">用户曹操登录</a></td>
        </tr>
        <tr>
            <td colspan="2"><a href="info.jsp?onlineUser=刘备">用户刘备登录</a></td>
        </tr>
        <tr>
            <td colspan="2"><a href="info.jsp?onlineUser=孙权">用户孙权登录</a></td>
        </tr>
    </table>
</div>


<hr>
<h1>
    连接上服务器的数量：${connTotal==null?0:connTotal}
</h1>

<hr>
<p>
    <label for="userName">用户名</label>
    <input type="text" id="userName" name="userName" onblur="checkUserExists()">
    <span id="existsInfo"></span>
</p>
<p>
    <label for="userPwd">密码</label>
    <input type="password" id="userPwd" name="userPwd">
</p>
<button onclick="register()">注册</button>
<hr>
<p>
    <a href="javascript:showUserById(1)">jquery的Ajax根据id获取用户</a>
</p>
<div id="userInfo"></div>
<p>
    <button onclick="showUsers()">jquery的Ajax获取全部用户</button>
</p>
<table border="1" cellspacing="0">
    <caption>学生信息统计</caption>
    <thead>
    <tr>
        <td>序号</td>
        <td>姓名</td>
        <td>密码</td>
    </tr>
    </thead>
    <tbody id="tbody"></tbody>
</table>
<script>
    function showUsers(){
        $.ajax({
            url:"user.do?key=showAll",
            type:"post",
            dataType: "json",
            success:function (data){
                //foreach循环
                for (var i in data){
                    $("#tbody").append("<tr><td>"+data[i].id+
                    "</td><td>"+data[i].userName+"</td><td>"+
                    data[i].userPwd+"</td><tr>")
                }
            }
        })
    }
    function showUserById(id){
        $.ajax({
            url:"user.do?key=showOne",
            data: {id:id},
            type:"post",
            dataType:"json",
            success:function (data){
                $("#userInfo").append("<p>序号："+data.id+"</p>")
                .append("<p>用户名："+data.userName+"</p>")
                .append("<p>密码："+data.userPwd+"</p>")
            }
        })
    }
    //用Ajax方式检查用户名是否存在
    function checkUserExists(){
        //用jQuery实现Ajax
        var userName=$("#userName").val();
        $.ajax({
            url:"user.do?key=exists",//请求的服务器端资源地址
            type:"post",//请求方式
            data:{userName:userName},//请求时传的参数
            dataType:"text",//期望服务器端响应回来的数据类型
            success:function (data){
                //function函数是：Ajax请求处理成功是的回调函数
                if(data=="yes"){
                    $("#existsInfo").html("用户已存在，不能重复注册！").css({"color":"red"});
                }else{
                    $("#existsInfo").html("用户不存在，可以注册！").css({"color":"green"});
                }
            },
            error:function (){
                alert("ajax请求失败！")
            }
        })

        //获取用户名输入框的值
        /*var userName = document.getElementById("userName").value;
        /!* alert(userName);*!/
        //用Ajax向服务器端传递数据，并接收响应状态
        //创建Ajax的核心对象
        var xhr = new XMLHttpRequest();
        //确定要请求的资源地址及方式
        xhr.open("get","user.do?userName="+userName,true);
        //发送异步请求
        xhr.send();
        //监听xhr核心对象的状态变化
        xhr.onreadystatechange=function (){
            //如果请求响应成功就处理
            if(xhr.readyState==4){
                if(status==200){
                    //判断服务器端传回来的字符串信息。yes存在，no表示不存在
                    var existsInfo = document.getElementById("existsInfo");
                    if(xhr.responseText=="yes"){
                        existsInfo.innerHTML="用户已存在，不能重复注册！"
                    }else {
                        existsInfo.innerHTML="用户名不存在，可以注册！"
                    }
                }

            }
        }*/
    }
    //在JavaScript里定义对象
    var obj={"name":"张三","age":23};
    function testAjax(){
        //创建ajax核心对象
        var xhr=new XMLHttpRequest();
        //设置服务器响应回的数据格式
        xhr.responseType="text";
        //初始化http请求参数【未发送】
        xhr.open("post","my.do",true);
        //设置请求头
        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        //回传数据的处理
        var content=document.getElementById("content");
        xhr.onload=function (e){
            if(this.readyState==4 && this.status==200){
                content.innerHTML=this.responseText;
            }
        }
        xhr.onerror=function (e){
            content.innerHTML="错误";
        }
        xhr.send("key=123");
    }
</script>
</body>
</html>